<template>
  <div class="width100" style="height:70px; background: #04addb">
    <div class="container flex-between-center height100">
      <div class="flex-middle height100">
        <div
            class="flex-middle head-left hover:tw-bg-[#039fc9] tw-w-206 height100 click change-select-course tw-relative"
        >
          <img
              alt=""
              class="tw-w-14 tw-h-14 tw-mr-12 tw-ml-24"
              src="@/assets/images/course/all-change.png"
          />
          <span class="font-l color-white tw-font-[600] tw-mr-24">{{
              data.currentCourser.name
            }}</span>
          <select-course-dropdown
              :TrendList="data.courseTypeCode"
              class="select-course"
              @changeDropDown="changeCourse"
          ></select-course-dropdown>
        </div>
        <div
            v-click-outside="onClickOutside"
            class="flex-middle  tw-px-12 hover:tw-bg-[#039fc9] height100 click tw-relative change-select-area border-box"
    @click="changsAreaClick"    >
          <img
              alt=""
              class="tw-w-14 tw-h-14 tw-mr-12"
              src="@/assets/images/course/course-local.png"
          />
          <span class="font-normal color-white tw-mr-15 tw-font-bold">{{
              data.currentArea.name
            }}</span>
          <el-icon class="icon-rotate" color="#fff">
            <CaretBottom/>
          </el-icon>
          <select-area-dropdown
              ref="areaDropDown"
              :areaTypeList="data.areaTypeList"
              :currentArea="data.currentArea"
              class="select-area"
              @changeArea="changeArea"
          ></select-area-dropdown>
        </div>
      </div>
      <div class="flex-middle height100">
        <div
            class="tw-w-118 hover:tw-bg-[#039fc9] height100 flex-all-center click"
            @click="goAllCourse(courseType)"
        >
          <span class="font-normal color-white">全部课程</span>
        </div>
        <div
            class="tw-w-118 hover:tw-bg-[#039fc9] height100 flex-all-center click change-select-area tw-relative change-select-exam"
        >
          <span class="font-normal color-white tw-mr-8">考试动态</span>
          <el-icon class="icon-rotate" color="#fff" size="16">
            <CaretBottom/>
          </el-icon>
          <select-course-dropdown
              :TrendList="data.examTrendList"
              class="select-exam"
              @changeDropDown="changeExam"
          ></select-course-dropdown>
        </div>
        <div
            class="tw-w-118 hover:tw-bg-[#039fc9] height100 flex-all-center click"
            @click="openPopup"
        >
          <span class="font-normal color-white">课程咨询</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {CaretBottom} from "@element-plus/icons-vue";
import SelectAreaDropdown from "@/views/course/component/select-area-dropdown.vue";
import {getTreeDictByCode} from "@/api/home.js";
import {onMounted, reactive, ref} from "vue";
import SelectCourseDropdown from "@/views/course/component/select-course-dropdown.vue";
import {useRoute, useRouter} from "vue-router";

let props = defineProps({
  courseType: {
    type: Number,
    default: -1,
  },
});
let router = useRouter();
let route = useRoute();
const data = reactive({
  areaTypeList: [],
  examTrendList: [],
  courseTypeCode: [],
  currentCourser: {},
  currentArea: {},
});
const initExamTrend = () => {
  getTreeDictByCode({typeCode: "regionCode"}, (res) => {
    data.currentArea =localStorage.getItem('provinceId')?res.data.find(item => item.id == localStorage.getItem('provinceId')): res.data[0];
    data.areaTypeList = res.data;
  });

  getTreeDictByCode({typeCode: "courseTypeCode"}, (res) => {
    // 判断是否意向或路由
    if (route.query.courseType) {
      data.currentCourser = res.data.find(item => item.id == route.query.courseType)
    } else if (localStorage.getItem('intentionalExamId')) {
      data.currentCourser = res.data.find(item => item.id == localStorage.getItem('intentionalExamId'))
    } else {
      data.currentCourser = res.data[0];
    }
    emit("changeCenter", {courseType: data.currentCourser.id});
    data.courseTypeCode = res.data;
    // 查询考试动态数据集合
    let getExamTrendCodeData = {
      provinceId: data.currentArea.id,
      typeCode: "examTrendCode",
      intentionalExamFlag: 0,
      courseType: data.currentCourser.id
    }
    getTreeDictByCode(getExamTrendCodeData, (res) => {
      data.examTrendList = res.data;
    });
  });
};
const changeCourse = (item) => {
  data.currentCourser = item;
  emit("changeCenter", {courseType: item.id});
  let getExamTrendCodeData = {
    provinceId: data.currentArea.id,
    typeCode: "examTrendCode",
    intentionalExamFlag: 0,
    courseType: data.currentCourser.id
  }
  getTreeDictByCode(getExamTrendCodeData, (res) => {
    data.examTrendList = res.data;
  });
};
const changeArea = (item) => {
  data.currentArea = item;
  emit("changeCenter", {provinceId: item.id});
  let getExamTrendCodeData = {
    provinceId: data.currentArea.id,
    typeCode: "examTrendCode",
    intentionalExamFlag: 0,
    courseType: data.currentCourser.id
  }
  getTreeDictByCode(getExamTrendCodeData, (res) => {
    data.examTrendList = res.data;
  });
};
const changeExam = (item) => {
  const {href} = router.resolve({
    path: "/article/info",
    query: {
      id: item.articleId,
    },
  });
  window.open(href, "_blank");
};
const emit = defineEmits(["changeCenter", "openPopup", "goNewsInfo"]);
onMounted(() => {
  initExamTrend();
});

const goAllCourse = (courseType) => {
  router.push({name: "AllCourse", query: {courseType: courseType}});
};
const openPopup = () => {
  emit("openPopup", 1);
};
let areaDropDown=ref()
const changsAreaClick = () => {
  areaDropDown.value.openAreaDialog(2)
}



const vClickOutside = {
  mounted(el, binding) {
    const eventHandler = (e) => {
      if (!el.contains(e.target)) {
        if (typeof binding.value === 'function') {
          binding.value(e);
        }
      }
    };
    el.__click_outside__ = eventHandler;
    document.addEventListener('click', eventHandler);
  },
  beforeUnmount(el) {
    document.removeEventListener('click', el.__click_outside__);
    delete el.__click_outside__;
  }
}
const onClickOutside = () => {
  areaDropDown.value.openAreaDialog(1)
}
</script>

<style lang="scss" scoped>
.change-select-area:hover .icon-rotate {
  transform: rotate(180deg);
}

.change-select-exam:hover .select-exam {
  display: block;
}

.change-select-exam:hover .icon-rotate {
  transform: rotate(180deg);
}

.change-select-course:hover .select-course {
  display: block;
}
</style>
